import * as React from 'react';
import {
  Input,
  Descriptions,
  TimePicker,
  Checkbox,
  Row,
  Col,
  Upload,
  Button,
  Table,
} from 'antd';
import { Link } from 'umi';
import { UploadOutlined } from '@ant-design/icons';
// import axios from 'axios';

export default () => {
  const data = [
    {
      key: '1',
      className: '张xx',
      FallInLove: '提交申请',
      name: '2020-10-11 9:00:00',
      kind: '',
    },
  ];

  const { TextArea } = Input;

  return (
    <>
      <div className="absence_title" style={{ marginBottom: '30px' }}>
        <Descriptions title="审核" layout="vertical">
          <Descriptions.Item label="姓名">张三</Descriptions.Item>
          <Descriptions.Item label="学号">189000416</Descriptions.Item>
          <Descriptions.Item label="院系">软件学院</Descriptions.Item>
          <Descriptions.Item label="专业">计算机科学与技术</Descriptions.Item>
          <Descriptions.Item label="年级">2018</Descriptions.Item>
          <Descriptions.Item label="班级">1890004</Descriptions.Item>
          <Descriptions.Item label="班主任">张xx</Descriptions.Item>
        </Descriptions>
      </div>
      <div className="absence_content">
        <p>主题：</p>
        <Input placeholder="xxx请假一天" style={{ marginBottom: '30px' }} />
        <p>请选择时间：</p>
        <TimePicker.RangePicker style={{ marginBottom: '30px' }} />
        <p>请假事因：</p>
        <Checkbox.Group style={{ width: '100%', marginBottom: '30px' }}>
          <Row>
            <Col span={8}>
              <Checkbox value="A">病假(需附校医院证明)</Checkbox>
            </Col>
            <Col span={8}>
              <Checkbox value="B">事假</Checkbox>
            </Col>
            <Col span={8}>
              <Checkbox value="C">其他</Checkbox>
            </Col>
          </Row>
        </Checkbox.Group>
        <TextArea
          rows={4}
          placeholder="请输入请假具体信息"
          style={{ marginBottom: '30px' }}
        />
        <Upload>
          <Button style={{ marginBottom: '30px' }} icon={<UploadOutlined />}>
            上传
          </Button>
        </Upload>
        {/* <p>审批人</p>
            <Input placeholder="张xx" style = {{width:"150px",marginBottom:'30px'}} /> */}
        <Table
          style={{ width: '800px' }}
          columns={[
            {
              title: '操作人',
              dataIndex: 'className',
            },
            {
              title: '操作事项',
              dataIndex: 'FallInLove',
            },
            {
              title: '事项状态',
              dataIndex: 'name',
            },
            {
              title: '操作时间',
              dataIndex: 'kind',
            },
            {
              title: '说明',
              dataIndex: 'kind',
              width: 300,
            },
          ]}
          dataSource={data}
          size="middle"
        />
        <p>
          <Button type="primary" style={{ marginLeft: '50px' }}>
            审批通过
          </Button>
          <Button style={{ marginLeft: '50px' }}>审批不通过</Button>
          <Button style={{ marginLeft: '50px' }}>
            <Link to="../absence/index">返回</Link>
          </Button>
        </p>
      </div>
    </>
  );
};
